Pemeriksaan Properti Berlebih TypeScript: Memperkuat Keamanan Tipe Objek Anda

            
interface User {
  name: string;
  age: number;
}

const newUser: User = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com' // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'email' tidak ada dalam tipe 'User'.
};

            

              
                Copy
              
            
          

            
interface Product {
  id: number;
  name: string;
}

function displayProduct(product: Product): void {
  console.log(`Product ID: ${product.id}, Name: ${product.name}`);
}

displayProduct({
  id: 101,
  name: 'Laptop',
  price: 1200 // Error: Argumen dengan tipe '{ id: number; name: string; price: number; }' tidak dapat ditetapkan ke parameter dengan tipe 'Product'.
             // Literal objek hanya boleh menentukan properti yang diketahui, dan 'price' tidak ada dalam tipe 'Product'.
});

            

              
                Copy
              
            
          

            
interface Config {
  timeout: number;
}

function setupConfig(config: Config) {
  console.log(`Timeout set to: ${config.timeout}`);
}

const userProvidedConfig = {
  timeout: 5000,
  retries: 3 // Properti 'retries' ini adalah properti berlebih menurut 'Config'
};

setupConfig(userProvidedConfig); // Tidak ada error!

// Meskipun userProvidedConfig memiliki properti tambahan, pemeriksaan dilewati
// karena ini bukan literal objek yang diteruskan secara langsung.
// TypeScript memeriksa tipe dari userProvidedConfig itu sendiri.
// Jika userProvidedConfig dideklarasikan dengan tipe Config, error akan terjadi lebih awal.
// Namun, jika dideklarasikan sebagai 'any' atau tipe yang lebih luas, error akan ditunda.

// Cara yang lebih tepat untuk menunjukkan bypass:
let anotherConfig;

if (Math.random() > 0.5) {
  anotherConfig = {
    timeout: 1000,
    host: 'localhost' // Properti berlebih
  };
} else {
  anotherConfig = {
    timeout: 2000,
    port: 8080 // Properti berlebih
  };
}

setupConfig(anotherConfig as Config); // Tidak ada error karena penegasan tipe dan bypass

// Kuncinya adalah 'anotherConfig' bukan literal objek pada saat penugasan ke setupConfig.
// Jika kita memiliki variabel perantara yang diketik sebagai 'Config', penugasan awal akan gagal.

// Contoh variabel perantara:
let intermediateConfig: Config;

intermediateConfig = {
  timeout: 3000,
  logging: true // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'logging' tidak ada dalam tipe 'Config'.
};

            

              
                Copy
              
            
          

            
interface Settings {
  theme: 'dark' | 'light';
}

const mySettings = {
  theme: 'dark',
  fontSize: 14 // Properti berlebih
} as Settings;

// Tidak ada error di sini karena penegasan tipe.
// Kita memberitahu TypeScript: "Percayalah, objek ini sesuai dengan Settings."
console.log(mySettings.theme);
// console.log(mySettings.fontSize); // Ini akan menyebabkan kesalahan runtime jika fontSize sebenarnya tidak ada.

            

              
                Copy
              
            
          

            
interface FlexibleObject {
  id: number;
  [key: string]: any; // Mengizinkan kunci string apa pun dengan nilai apa pun
}

const flexibleItem: FlexibleObject = {
  id: 1,
  name: 'Widget',
  version: '1.0.0'
};

// Tidak ada error karena 'name' dan 'version' diizinkan oleh tanda tangan indeks.
console.log(flexibleItem.name);

            

              
                Copy
              
            
          

            
interface BaseConfig {
  host: string;
}

interface ExtendedConfig extends BaseConfig {
  port: number;
}

const defaultConfig: BaseConfig = {
  host: 'localhost'
};

const userConfig = {
  port: 8080,
  timeout: 5000 // Properti berlebih relatif terhadap BaseConfig, tetapi diharapkan oleh tipe gabungan
};

// Melakukan spread ke dalam literal objek baru yang sesuai dengan ExtendedConfig
const finalConfig: ExtendedConfig = {
  ...defaultConfig,
  ...userConfig
};

// Ini umumnya tidak masalah karena 'finalConfig' dideklarasikan sebagai 'ExtendedConfig'
// dan propertinya cocok. Pemeriksaan dilakukan pada tipe 'finalConfig'.

// Mari kita pertimbangkan skenario di mana ini *akan* gagal:

interface SmallConfig {
  key: string;
}

const data1 = { key: 'abc', value: 123 }; // 'value' adalah properti tambahan di sini
const data2 = { key: 'xyz', status: 'active' }; // 'status' adalah properti tambahan di sini

// Mencoba menetapkan ke tipe yang tidak mengakomodasi properti tambahan

// const combined: SmallConfig = {
//   ...data1, // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'value' tidak ada dalam tipe 'SmallConfig'.
//   ...data2  // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'status' tidak ada dalam tipe 'SmallConfig'.
// };

// Kesalahan terjadi karena literal objek yang dibentuk oleh sintaks spread
// berisi properti ('value', 'status') yang tidak ada dalam 'SmallConfig'.

// Jika kita membuat variabel perantara dengan tipe yang lebih luas:

const temp: any = {
  ...data1,
  ...data2
};

// Kemudian menetapkannya ke SmallConfig, pemeriksaan properti berlebih dilewati pada pembuatan literal awal,
// tetapi pemeriksaan tipe pada penugasan mungkin masih terjadi jika tipe temp disimpulkan lebih ketat.
// Namun, jika temp adalah 'any', tidak ada pemeriksaan yang terjadi sampai penugasan ke 'combined'.

// Mari kita perjelas pemahaman tentang spread dengan pemeriksaan properti berlebih:
// Pemeriksaan terjadi ketika literal objek yang dibuat oleh sintaks spread ditetapkan
// ke variabel atau diteruskan ke fungsi yang mengharapkan tipe yang lebih spesifik.

interface SpecificShape { 
  id: number;
}

const objA = { id: 1, extra1: 'hello' };
const objB = { id: 2, extra2: 'world' };

// Ini akan gagal jika SpecificShape tidak mengizinkan 'extra1' atau 'extra2':
// const merged: SpecificShape = {
//   ...objA,
//   ...objB
// };

// Alasan gagalnya adalah karena sintaks spread secara efektif membuat literal objek baru.
// Jika objA dan objB memiliki kunci yang tumpang tindih, yang terakhir akan menang. Compiler
// melihat literal hasil ini dan memeriksanya terhadap 'SpecificShape'.

// Agar berhasil, Anda mungkin memerlukan langkah perantara atau tipe yang lebih permisif:

const tempObj = {
  ...objA,
  ...objB
};

// Sekarang, jika tempObj memiliki properti yang tidak ada di SpecificShape, penugasan akan gagal:
// const mergedCorrected: SpecificShape = tempObj; // Error: Literal objek hanya boleh menentukan properti yang diketahui...

// Kuncinya adalah compiler menganalisis bentuk literal objek yang sedang dibentuk.
// Jika literal tersebut berisi properti yang tidak didefinisikan dalam tipe target, itu adalah kesalahan.

// Kasus penggunaan umum untuk sintaks spread dengan pemeriksaan properti berlebih:

interface UserProfile {
  userId: string;
  username: string;
}

interface AdminProfile extends UserProfile {
  adminLevel: number;
}

const baseUserData: UserProfile = {
  userId: 'user-123',
  username: 'coder'
};

const adminData = {
  adminLevel: 5,
  lastLogin: '2023-10-27'
};

// Di sinilah pemeriksaan properti berlebih menjadi relevan:
// const adminProfile: AdminProfile = {
//   ...baseUserData,
//   ...adminData // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'lastLogin' tidak ada dalam tipe 'AdminProfile'.
// };

// Literal objek yang dibuat oleh spread memiliki 'lastLogin', yang tidak ada di 'AdminProfile'.
// Untuk memperbaikinya, 'adminData' idealnya harus sesuai dengan AdminProfile atau properti berlebih harus ditangani.

// Pendekatan yang diperbaiki:
const validAdminData = {
  adminLevel: 5
};

const adminProfileCorrect: AdminProfile = {
  ...baseUserData,
  ...validAdminData
};

console.log(adminProfileCorrect.userId);
console.log(adminProfileCorrect.adminLevel);

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
}

interface UserWithMetadata extends UserProfile {
  metadata: {
    [key: string]: any;
  };
}

// Atau lebih umum dengan alias tipe dan sintaks rest:
type UserProfileWithMetadata = UserProfile & {
  [key: string]: any;
};

const user1: UserProfileWithMetadata = {
  id: 1,
  name: 'Bob',
  email: 'bob@example.com',
  isAdmin: true
};

// Tidak ada error, karena 'email' dan 'isAdmin' ditangkap oleh tanda tangan indeks di UserProfileWithMetadata.
console.log(user1.email);
console.log(user1.isAdmin);

// Cara lain menggunakan parameter sisa dalam definisi tipe:
interface ConfigWithRest {
  apiUrl: string;
  timeout?: number;
  // Tangkap semua properti lain ke dalam 'extraConfig'
  [key: string]: any;
}

const appConfig: ConfigWithRest = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  featureFlags: {
    newUI: true,
    betaFeatures: false
  }
};

console.log(appConfig.featureFlags);

            

              
                Copy
              
            
          

            
interface Employee {
  employeeId: string;
  department: string;
}

function processEmployeeData(data: Employee & { [key: string]: any }) {
  const { employeeId, department, ...otherDetails } = data;

  console.log(`Employee ID: ${employeeId}`);
  console.log(`Department: ${department}`);
  console.log('Other details:', otherDetails);
  // otherDetails akan berisi properti apa pun yang tidak di-destructure secara eksplisit,
  // seperti 'salary', 'startDate', dll.
}

const employeeInfo = {
  employeeId: 'emp-789',
  department: 'Engineering',
  salary: 90000,
  startDate: '2022-01-15'
};

processEmployeeData(employeeInfo);

// Meskipun employeeInfo memiliki properti tambahan pada awalnya, pemeriksaan properti berlebih
// dilewati jika tanda tangan fungsi menerimanya (misalnya, menggunakan tanda tangan indeks).
// Jika processEmployeeData diketik secara ketat sebagai 'Employee', dan employeeInfo memiliki 'salary',
// error akan terjadi JIKA employeeInfo adalah literal objek yang diteruskan secara langsung.
// Tapi di sini, employeeInfo adalah variabel, dan tipe fungsi menangani properti tambahan.

            

              
                Copy
              
            
          

            
interface UserProfile {
  id: number;
  name: string;
  email?: string; // Email opsional
}

const userWithEmail: UserProfile = {
  id: 2,
  name: 'Charlie',
  email: 'charlie@example.com'
};

const userWithoutEmail: UserProfile = {
  id: 3,
  name: 'David'
};

// Jika kita mencoba menambahkan properti yang tidak ada di UserProfile:
// const userWithExtra: UserProfile = {
//   id: 4,
//   name: 'Eve',
//   phoneNumber: '555-1234'
// }; // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'phoneNumber' tidak ada dalam tipe 'UserProfile'.

            

              
                Copy
              
            
          

            
interface ProductConfig {
  id: string;
  version: string;
}

// Bayangkan ini berasal dari sumber eksternal atau modul yang kurang ketat
const externalConfig = {
  id: 'prod-abc',
  version: '1.2',
  debugMode: true // Properti berlebih
};

// Jika Anda tahu 'externalConfig' akan selalu memiliki 'id' dan 'version' dan Anda ingin memperlakukannya sebagai ProductConfig:
const productConfig = externalConfig as ProductConfig;

// Penegasan ini melewati pemeriksaan properti berlebih pada `externalConfig` itu sendiri.
// Namun, jika Anda meneruskan literal objek secara langsung:

// const productConfigLiteral: ProductConfig = {
//   id: 'prod-xyz',
//   version: '2.0',
//   debugMode: false
// }; // Error: Literal objek hanya boleh menentukan properti yang diketahui, dan 'debugMode' tidak ada dalam tipe 'ProductConfig'.

            

              
                Copy
              
            
          

            
interface Shape {
  kind: 'circle' | 'square';
}

interface Circle extends Shape {
  kind: 'circle';
  radius: number;
}

interface Square extends Shape {
  kind: 'square';
  sideLength: number;
}

function calculateArea(shape: Shape) {
  if (shape.kind === 'circle') {
    // TypeScript tahu 'shape' adalah Circle di sini
    console.log(Math.PI * shape.radius ** 2);
  } else if (shape.kind === 'square') {
    // TypeScript tahu 'shape' adalah Square di sini
    console.log(shape.sideLength ** 2);
  }
}

const circleData = {
  kind: 'circle' as const, // Menggunakan 'as const' untuk inferensi tipe literal
  radius: 10,
  color: 'red' // Properti berlebih
};

// Saat diteruskan ke calculateArea, tanda tangan fungsi mengharapkan 'Shape'.
// Fungsi itu sendiri akan mengakses 'kind' dengan benar.
// Jika calculateArea mengharapkan 'Circle' secara langsung dan menerima circleData
// sebagai literal objek, 'color' akan menjadi masalah.

// Mari kita ilustrasikan pemeriksaan properti berlebih dengan fungsi yang mengharapkan subtipe tertentu:

function processCircle(circle: Circle) {
  console.log(`Processing circle with radius: ${circle.radius}`);
}

// processCircle(circleData); // Error: Argumen dengan tipe '{ kind: "circle"; radius: number; color: string; }' tidak dapat ditetapkan ke parameter dengan tipe 'Circle'.
                         // Literal objek hanya boleh menentukan properti yang diketahui, dan 'color' tidak ada dalam tipe 'Circle'.

// Untuk memperbaikinya, Anda dapat melakukan destructuring atau menggunakan tipe yang lebih permisif untuk circleData:

const { color, ...circleDataWithoutColor } = circleData;
processCircle(circleDataWithoutColor);

// Atau definisikan circleData untuk menyertakan tipe yang lebih luas:

const circleDataWithExtras: Circle & { [key: string]: any } = {
  kind: 'circle',
  radius: 15,
  color: 'blue'
};
processCircle(circleDataWithExtras); // Sekarang berhasil.

            

              
                Copy